Ext.chloroform.ScenariosGrid = Ext.extend(Ext.grid.GridPanel, {

    /**
     * @cfg {String} the URL for retrieving the project model in JSON
     */
    projectModelUrl: null,

    /**
     * @cfg {Object} the row expander
     */
    expander: null,

    /**
     * @cfg {Object} the main page selection listener
     */
    pageSelectionListener: null,


    border:false,

    title: 'Scenario Elements',
    collapsible: true,
    region: 'center',
    margins: '5 0 0 0',
    padding: '0 0 0 0',
    stripeRows: true,

    stateful: true,
	stateId: 'grid',

    autoHeight: true,
    autoScroll: true,

    viewConfig: {
        forceFit:true
    },

    initComponent: function() {
        this.plugins = this.expander;

        var gridPlugin;
        if (this.expander)
            gridPlugin = this.expander;
        else
            gridPlugin = new Ext.grid.RowNumberer();

        this.cm = new Ext.grid.ColumnModel([
            gridPlugin,
            {header: "ID", width: 50, sortable: true, dataIndex: 'id'},
            {header: "Entry Name", width: 70, sortable: true, dataIndex: 'name'},
            {header: "Entry Type", width: 120, sortable: true, dataIndex: 'type'},
            {header: "Entry Description", width: 140, sortable: false, dataIndex: 'description'}
        ]);

        this.ds = new Ext.data.Store({
            url: this.projectModelUrl,
            reader: new Ext.data.JsonReader({
                root:'entries',
                idProperty:'id',
                fields: [
                    {name: 'id', mapping: 'id'},
                    {name: 'name', mapping: 'CommonMetaData.title'},
                    {name: 'type', mapping: 'entryType'},
                    {name: 'description', mapping: 'CommonMetaData.description'}
                ]
            }),
            autoLoad: false
        });

//        this.ds.on("load", function() {
//            alert("loaded");
//        });

        this.ds.load();

        Ext.chloroform.ScenariosGrid.superclass.initComponent.call(this);

        var selModel = this.getSelectionModel();
        if (this.pageSelectionListener) {
            var selListener = this.pageSelectionListener;
            selModel.on("rowselect", function(sm, rowIndex, record) {
                selListener.selectPage(record.id);
            });
        }

        this.on("cellclick", function(grid, rowIndex) {
            selModel.selectRow(rowIndex);
        })
    },

    onRender : function(ct, position) {
        Ext.chloroform.ScenariosGrid.superclass.onRender.apply(this, arguments);

        // Swallowing events allows nesting grids and handling events by the focused grid only
        var myEl = this.getEl();
        myEl.swallowEvent([ 'mouseover', 'mouseout', 'mousedown', 'click', 'dblclick' ]);
    }

});